<%--
  Created by IntelliJ IDEA.
  User: xianfei
  Date: 15-5-29
  Time: 下午3:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>聊天室</title>
    <style>
        .content {
            width: 70%;
            height: 500px;
            margin: 100px auto;
        }

        .button-content {
            margin: 10px;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $('[data-toggle="popover"]').popover();
            $('[data-toggle="tooltip"]').tooltip();
            $("#chart").hide();
            $("#tips_content").hide();
            $("#loginBtn").click(function () {
                var username = $("#username").val();
                if ("" === username) {
                    alert('请输入名字!');
                } else {
                    $("#login").hide();
                    $("#chart").show();
                    $("#tips_content").show();
                    handShake();
                }
            });
            $("#sendMsg").on("keydown", function (e) {
                if (e.keyCode == 13) {
                    sendMsg();
                }
            });
        });
        var ws = null;
        function handShake() {
            var username = $("#username").val();
            var url = "ws://" + window.location.host + "/ws3/" + username;
            if ('WebSocket' in window) {
                ws = new WebSocket(url);
            } else if ('MozWebSocket' in window) {
                ws = new MozWebSocket(url);
            } else {
                alert('你的浏览器不支持 WebSocket!');
                return;
            }
            ws.onopen = function () {
                $("#tips_content").html('WebSocket Create By XF !<br />');
            };
            ws.onmessage = function (event) {
                $("#tips_content").append(event.data + '<br/>');
                $("#tips_content").scrollTop("99999");
            };
            ws.onclose = function () {
                $("#tips_content").append('WebSocket Close !<br />');
            };
        }

        function sendMsg() {
            var textMessage = document.getElementById('msg');
            var usertype = $("[name=socket_users]:checked").val();
            console.log(usertype);
            if (ws != null && textMessage.value != '') {
                ws.send(usertype + '&' + textMessage.value);
                textMessage.value = '';
            }
        }
        function a() {
            if (confirm("点我，再点我,再点我试试!")) {
                a();
            } else {
                a();
            }
        }
        function allUserIps() {
            $.ajax({
                url: '/index/get_all_ips',
                type: 'get',
                dataType: 'text',
                success: function (data) {
                    $("#tips_content").append(data);
                }
            })
        }
        function clearScreen() {
            $("#tips_content").html('');
        }
        function showAllUser() {
            $.ajax({
                url: '/websocket/all_user',
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    $("#onlineUser").append(data);
                }
            })
        }

    </script>
</head>
<body>
<div class="content">
    <div id="login">
        昵称:<input type="text" id="username"/><input type="button" id="loginBtn" value="进入聊天室">
    </div>
    <div id="onlineUser">
        <label><input type="radio" name="socket_users" value="all" checked>所有用户</label>
    </div>
    <div id="chart">
        <textarea class="form-control" id="msg" rows="10"></textarea>

        <div class="button-content">
            <button class="btn btn-primary" onclick="sendMsg()" id="sendMsg">Send</button>
            <button class="btn btn-default" onclick="clearScreen()">清屏</button>
            <button class="btn btn-default" onclick="showAllUser()">显示所有用户</button>
            <button class="btn btn-default" onclick="a()">点我抽大奖</button>
            <button class="btn btn-default" onclick="allUserIps()">显示所有在线用户内网IP地址</button>
            <a tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus"
               data-placement="bottom" data-content="这只是一个提示">提示</a>
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right"
                    title="Tooltip on right">Tooltip
            </button>
        </div>
    </div>
    <script>
        //        document.body.onbeforeunload = function () {
        //            return true;
        //        }
    </script>
    <div class="alert alert-success" id="tips_content" role="alert"></div>
</div>
</body>
</html>
